<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑用户 | cms</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        body{
            width: 100%;
        }
        #content{
            margin: 0 auto;
            margin-top: 20px;
            padding: 40px;
            width: 1060px;
        }
    </style>
</head>
<body>
<div class="main-content" id="content">
    <form id="form-user-add" class="form-horizontal">
        <h4 class="form-header h4" style="color: #6379BB">用户基本信息填写</h4>
        <hr/>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">楼号:  </label>
                    <div class="col-sm-8">
                        <input id="buildingNo" placeholder="请输楼号" class="form-control" type="text" maxlength="30" required th:value="${updateUserInfo.getBuildingNo().trim()}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">房号:  </label>
                    <div class="col-sm-8">
                        <input id="roomNo" placeholder="请输入房号" class="form-control" type="text" maxlength="30" required th:value="${updateUserInfo.getRoomNo()}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">房屋面积:  </label>
                    <div class="col-sm-8">
                        <input id="area" placeholder="请输入面积" class="form-control" type="text" maxlength="30" required th:value="${updateUserInfo.getArea().trim()}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">户主名:  </label>
                    <div class="col-sm-8">
                        <input id="userName" placeholder="请输入户主名" class="form-control" type="text" maxlength="30" required th:value="${updateUserInfo.getHostname().trim()}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">电话:  </label>
                    <div class="col-sm-8">
                        <input id="tele" placeholder="请输入电话" class="form-control" type="number" maxlength="30" required th:value="${updateUserInfo.getTele().trim()}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">性别:  </label>
                    <div class="col-sm-8">
                        <select id="sex" class="form-select form-control" aria-label="Default select example" maxlength="30">
                            <option value="男"   th:selected="${updateUserInfo.getSex().trim() == '男'}">男</option>
                            <option value="女"   th:selected="${updateUserInfo.getSex().trim() == '女'}">女</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">工作:  </label>
                    <div class="col-sm-8">
                        <input id="work" placeholder="请输入工作" class="form-control" type="text" maxlength="30" required th:value="${updateUserInfo.getWork().trim()}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">家庭人数:  </label>
                    <div class="col-sm-8">
                        <input id="familyNum" placeholder="请输入家庭人数" class="form-control" type="number" maxlength="30" required th:value="${updateUserInfo.getFamilyNum().trim()}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">基金余额:  </label>
                    <div class="col-sm-8">
                        <input id="balance" placeholder="请输入基金余额" class="form-control" type="text" maxlength="30" required th:value="${updateUserInfo.getBalance().trim()}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">物业费用(月):  </label>
                    <div class="col-sm-8">
                        <input id="propertyFee" placeholder="请输入物业费用" class="form-control" type="text" maxlength="30" required th:value="${updateUserInfo.getPropertyFee().trim()}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">搬入日期:  </label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="laydate-time" placeholder="选择日期" maxlength="30" required th:value="${updateUserInfo.getCheckinDate().trim()}">
                    </div>
                </div>
            </div>
        </div>
    </form>
    <br/>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()">保 存</button>&nbsp;
            <a href="javascript:;"><button type="button" class="btn btn-sm btn-danger" onclick="shutdown()">关 闭 </button></a>
        </div>
    </div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/laydate/laydate.js}"></script>
<script>
    //常规用法
    laydate.render({
        elem: '#laydate-time'
    });

    submitHandler = () =>{
        let buildingNo = $("#buildingNo").val()
        let roomNo = $("#roomNo").val()
        let area = $("#area").val()
        let hostname = $("#userName").val()
        let tele = $("#tele").val()
        let sex = $("#sex").val()
        let work = $("#work").val()
        let familyNum = $("#familyNum").val()
        let balance = $("#balance").val()
        let propertyFee = $("#propertyFee").val()
        let checkinDate = $("#laydate-time").val()
        if(buildingNo.length === 0){
            showError('楼号不能为空')
            return;
        }
        if(roomNo.length === 0){
            showError('房号不能为空')
            return;
        }
        if(area.length === 0){
            showError('房屋面积不能为空')
            return;
        }
        if(hostname.length === 0){
            showError('户主名号不能为空')
            return;
        }
        if(tele.length === 0){
            showError('联系方式不能为空')
            return;
        }
        if(sex.length === 0){
            showError('性别不能为空')
            return;
        }
        if(work.length === 0){
            showError('工作名称号不能为空')
            return;
        }
        if(familyNum.length === 0){
            showError('家庭人数不能为空')
            return;
        }
        if(balance.length === 0){
            showError('基金余额不能为空')
            return;
        }
        if(propertyFee.length === 0){
            showError('物业费用不能为空')
            return;
        }
        if(checkinDate.length === 0){
            showError('日期不能为空');
            return;
        }
        $.post("/sys/user/update",{
            buildingNo:buildingNo,
            roomNo:roomNo,
            area:area,
            hostname:hostname,
            tele:tele,
            work:work,
            sex:sex,
            familyNum:familyNum,
            balance:balance,
            propertyFee:propertyFee,
            checkinDate:new Date(checkinDate),
            numberID:-1
        },function (data){
            if(data == 'success'){
                alert('更新成功')
            }else{
                alert('更新失败')
            }
            location.reload()//页面刷新
        })
    }

    showError = data =>{
        alert(data)
    }

    checkoutData = () =>{
        let buildingNo = $("#buildingNo").val()
        let roomNo = $("#roomNo").val()
        let area = $("#area").val()
        let hostname = $("#userName").val()
        let tele = $("#tele").val()
        let sex = $("#sex").val()
        let work = $("#work").val()
        let familyNum = $("#familyNum").val()
        let balance = $("#balance").val()
        let propertyFee = $("#propertyFee").val()
        let checkinDate = $("#laydate-time").val()
        if(buildingNo.length === 0){
            showError('楼号不能为空')
        }
        if(roomNo.length === 0){
            showError('房号不能为空')
        }
        if(area.length === 0){
            showError('房屋面积不能为空')
        }
        if(hostname.length === 0){
            showError('户主名号不能为空')
        }
        if(tele.length === 0){
            showError('联系方式不能为空')
        }
        if(sex.length === 0){
            showError('性别不能为空')
        }
        if(work.length === 0){
            showError('工作名称号不能为空')
        }
        if(familyNum.length === 0){
            showError('家庭人数不能为空')
        }
        if(balance.length === 0){
            showError('基金余额不能为空')
        }
        if(propertyFee.length === 0){
            showError('物业费用不能为空')
        }
        if(checkinDate.length === 0){
            showError('日期不能为空')
        }
    }

    shutdown = ()=>{
        //console.log('pathname'+window.location.pathname)
        //console.log('hash'+window.location.hash)
        //console.log('href'+window.location.href)
        history.go(-1);// 仅仅返回,没有再刷新的效果

    }


</script>
</body>
</html>